<template>
  <div id="app">
    <router-view />
    <div class="footer">
      <van-tabbar router v-model="active">
        <van-tabbar-item class="icon" :to="{ name: 'Home' }" icon="home-o"
          >首页</van-tabbar-item
        >
        <van-tabbar-item class="icon" :to="{ name: 'List' }" icon="search"
          >列表</van-tabbar-item
        >
        <van-tabbar-item class="icon" :to="{ name: 'Cart' }" icon="friends-o"
          >购物车</van-tabbar-item
        >
        <van-tabbar-item class="icon" :to="{ name: 'User' }" icon="setting-o"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style>
html,
body,
#app {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
* {
  margin: 0;
  padding: 0;
}
.footer {
  height: 50px;
}
.footer .icon{
  font-size: 16px;
}
</style>
